import React, {useEffect, useState} from 'react';
import {Layout,Space,Badge,Avatar,Menu,Dropdown} from "antd";
import {BellOutlined,ProjectOutlined,UserOutlined,LogoutOutlined,SettingOutlined,TeamOutlined} from '@ant-design/icons';
import {Outlet,useNavigate} from "react-router-dom";

import Logo from "../assets/react.svg"
import "./basicLayout.less"

export default function BasicLayout() {

    let [collapse, setCollapse] = useState(false)
    let [menuItems, setMenuItems] = useState([])

    let navigate = useNavigate();

    useEffect(() => {
        setMenuItems([
            {
                label: '项目列表',
                key: 'project',
                icon: <ProjectOutlined />,
                url:"/project/list"
            },
            {
                label: '日志列表',
                key: 'log',
                icon: <ProjectOutlined />,
                url:"/health/check"
            },
            {
                label: '用户列表',
                key: 'user',
                icon: <TeamOutlined />,
                url:"/user/list"
            },
        ])
    },[])

    const changeMenu = (item) => {
        let props = item.item.props
        if (props.url) {
            navigate(props.url)
        }
    }

    const onCollapse = value => {
        sessionStorage.setItem("collapse", value)
        setCollapse(value)
    };

    const items = [
        {
            key: '1',
            icon: <SettingOutlined />,
            label: (
                <a>
                    设置
                </a>
            ),
        },
        {
            key: '2',
            icon: <LogoutOutlined />,
            label: (
                <a>
                    退出
                </a>
            ),
        },
    ];

    const {Header, Footer, Sider, Content} = Layout;

    return (
        <Layout style={{minHeight: '100vh'}}>
            <Header className="header">
                <div className="logo">
                    <img src={Logo} height={40} alt={'logo'}/>
                </div>
                <div className="user-center">
                    <Space size={'large'}>
                        <Badge count={1}>
                            <Avatar icon={<BellOutlined/>}/>
                        </Badge>
                        <Dropdown menu={{ items }}>
                            <Avatar icon={<UserOutlined />} />
                        </Dropdown>
                    </Space>
                </div>
            </Header>
            <Layout>
                <Sider collapsible theme='light' collapsed={collapse} onCollapse={onCollapse}>
                    <Menu mode="inline" items={menuItems} style={{height: '100%', borderRight: 0}} onClick={changeMenu}/>
                </Sider>
                <Layout>
                    <Content>
                        <Outlet/>
                    </Content>
                    {/*<Footer>*/}
                    {/*    <span>©2020&nbsp;&nbsp;</span>*/}
                    {/*</Footer>*/}
                </Layout>
            </Layout>
        </Layout>
    )
}